<template>
    <div class="com_box mt_12 pl_20 pr_20 pb_20">
        <div class="tk_title flexbox flexcenter">
            广告创建账户
            <div class="flexbox flexcenter tips_user">
                <i class="el-icon-warning-outline"></i>
                确保所选账户与资产账户同步，否则广告将创建失败！
            </div>
        </div>

        <div class="flexbox com_select">
            <div class="scence_left">
                <div class="scence_head flexbox flexcenter">
                    <div class="font_14 color_01">选择账户</div>
                </div>
                <div class="scence_search">
                    <el-input placeholder="账户名称、账户 ID 搜索" size="small" clearable prefix-icon="el-icon-search" v-model="query">
                    </el-input>
                </div>
                <div class="scence_height">
                    <el-checkbox-group v-model="dataForm.advertiser_ids" class="talent_check" @change="sessionSave">
                        <el-checkbox :label="item.advertiser_id" v-for="item in filteredData(adverList,query)" :key="item.advertiser_id">
                            <div class="flex flexbox flexcenter">
                                <div class="talent_info flex">
                                    <div class="talent_name">{{item.advertiser_name}}</div>
                                    <div class="talent_fans">
                                        <span>ID：{{item.advertiser_id}}</span>
                                    </div>
                                </div>
                            </div>
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="scence_right">
                <div class="scence_head flexbox flexcenter flexbetween">
                    <div class="font_14 color_01">已选账户</div>
                    <el-link type="primary" :underline="false" @click="clearBrand">清空</el-link>
                </div>
                <div class="scence_has">
                    <div class="has_item flexbox flexcenter flexbetween" v-for="item in selectBrand" :key="item.id">
                        <div class="font_14">
                            <div class="color_01 line_one">{{item.advertiser_name}}</div>
                            <div class="color_02">ID：{{item.advertiser_id}}</div>
                        </div>
                        <el-link :underline="false" icon="el-icon-close" style="margin-left:5px" @click="delBrand(item)"></el-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["dataForm","adverList"],
    components: {},
    name: "",
    data() {
        return {
            query:""
        };
    },
    created() {},
    computed:{
        selectBrand(){
            let arr = []
            for(let i in this.adverList){
                for(let a in this.dataForm.advertiser_ids){
                    if(this.adverList[i].advertiser_id==this.dataForm.advertiser_ids[a]){
                        arr.push(this.adverList[i])
                    }
                }
            }
            return arr
        },
    },
    methods: {
        // 清空
        clearBrand(){
            this.dataForm.advertiser_ids = []
            this.sessionSave()
        },

        // 删除
        delBrand(item){
            let index =  this.dataForm.advertiser_ids.findIndex(val=>val==item.advertiser_id)
            if(index!=-1){
                this.dataForm.advertiser_ids.splice(index,1)
            }
            this.sessionSave()
        },

        // 筛选
        filteredData(list, query) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if(!item.advertiser_name){
                    return
                }
                if (
                    item.advertiser_name.indexOf(query) !== -1 ||
                    item.advertiser_id == query
                ) {
                    return item;
                }
            });
            return list;
        },
        sessionSave() {
            this.$emit("sessionSave");
        },
    },
};
</script>


<style scoped>
.com_select .scence_left,.com_select .scence_right{
    width: 480px;
}
.com_select .scence_height{
    height: 268px;
}
.com_select .scence_has{
    height: 324px;
}
.com_select .has_item{
    padding: 12px 16px;
}
.tips_user {
    font-size: 13px;
    color: #b4b7bd;
    margin-left: 8px;
    font-weight: normal;
}
.tips_user .el-icon-warning-outline{
    font-size: 13px;
    margin-right: 5px;
}
</style>

